<template>
  <div>
   <div class="shadow-box">
    <el-row>
        <el-col :span="4">
          <div class="material_div">
          <el-avatar :size="30" :src="niuwan_logo"></el-avatar>
          </div>
        </el-col> 
        <el-col :span="16">
          <div class="material_div title_inner">{{title}}</div> 
        </el-col>
        <el-col :span="4">
          <el-button @click="drawer = true" type="primary" style="border: 0; margin-right: 3%;background-color:chocolate"><i class="el-icon-zoom-in"></i></el-button>
         
        </el-col>
     </el-row> 
    </div>
    <div style="padding:2%;padding-bottom:40px;"> 
      <el-table 
        :data="order_list_new" 
        style="width: 100%" :height="table_height" :v-loading="loading" id="show_table" ref="show_table">
        <el-table-column align="center" label="图样" width="70" fixed >
                <template slot-scope="scope">
                    <el-image 
                            style="width: 50px; height: 50px"
                            :src="scope.row.image_path"
                            :preview-src-list="[scope.row.image_path]"
                            lazy scroll-container=".el-table__body-wrapper">
                        </el-image>
                        <div style="display:block; font-size: 12px;">{{ scope.row.image_name }} </div> 
                </template>
            </el-table-column>
            <el-table-column prop="mingxinpian" label="明信片">
                <template slot-scope="scope">
                    <el-input-number @change="handleInputChange(scope.row ,$event)" style="width:80%" v-if="scope.row.is_mingxinpian==true" v-model="scope.row.mingxinpian_count" :controls="false"></el-input-number>
                    <span v-else>无</span>
                </template> 
            </el-table-column>
            <el-table-column prop="jiazi" label="夹子">
                <template slot-scope="scope">
                    <el-input-number @change="handleInputChange(scope.row, $event)" style="width:80%"  v-if="scope.row.is_jiazi==true" v-model="scope.row.jiazi_count" :controls="false"></el-input-number>
                    <span v-else>无</span>
                </template> 
            </el-table-column>
            <el-table-column prop="qinang" label="气囊">
                <template slot-scope="scope">
                    <el-input-number @change="handleInputChange(scope.row, $event)" style="width:80%"  v-if="scope.row.is_qinang==true" v-model="scope.row.qinang_count" :controls="false"></el-input-number>
                    <span v-else>无</span>
                </template> 
            </el-table-column>
            <el-table-column prop="bingxiangtie" label="冰箱贴">
                <template slot-scope="scope">
                    <el-input-number @change="handleInputChange(scope.row, $event)" style="width:80%"  v-if="scope.row.is_bingxiangtie==true" v-model="scope.row.bingxiangtie_count" :controls="false"></el-input-number>
                    <span v-else>无</span>
                </template> 
            </el-table-column>
            <el-table-column prop="guapai" label="挂牌">
                <template slot-scope="scope">
                    <el-input-number @change="handleInputChange(scope.row, $event)" style="width:80%"  v-if="scope.row.is_guapai==true" v-model="scope.row.guapai_count" :controls="false"></el-input-number>
                    <span v-else>无</span>
                </template> 
            </el-table-column>

           <!--  <el-table-column prop="guapai" label="贴纸">
                <template slot-scope="scope">
                    <el-input-number style="width:80%"  v-if="scope.row.is_tiezhi==true" v-model="scope.row.tiezhi_count" :controls="false"></el-input-number>
                    <span v-else>无</span>
                </template> 
            </el-table-column>
            <el-table-column prop="guapai" label="福字">
                <template slot-scope="scope">
                    <el-input-number style="width:80%"  v-if="scope.row.is_fuzi==true" v-model="scope.row.fuzi_count" :controls="false"></el-input-number>
                    <span v-else>无</span>
                </template> 
            </el-table-column>
            <el-table-column prop="guapai" label="1M分装">
                <template slot-scope="scope">
                    <el-input-number style="width:80%"  v-if="scope.row.is_yimifenzhuang==true" v-model="scope.row.yimifenzhuang_count" :controls="false"></el-input-number>
                    <span v-else>无</span>
                </template> 
            </el-table-column>
            <el-table-column prop="guapai" label="刺绣贴">
                <template slot-scope="scope">
                    <el-input-number style="width:80%"  v-if="scope.row.is_cixiutie==true" v-model="scope.row.cixiutie_count" :controls="false"></el-input-number>
                    <span v-else>无</span>
                </template> 
            </el-table-column>
            <el-table-column prop="guapai" label="香薰片">
                <template slot-scope="scope">
                    <el-input-number style="width:80%"  v-if="scope.row.is_xiangxunpian==true" v-model="scope.row.xiangxunpian_count" :controls="false"></el-input-number>
                    <span v-else>无</span>
                </template> 
            </el-table-column> -->
      </el-table> 
 
      <el-table 
        :data="order_list_new_other"
        style="width: 100%;margin-top: 10px;" height="300" :v-loading="loading">
        <el-table-column align="center" label="图样" width="170" fixed >
                <template slot-scope="scope">
                    <el-image 
                            style="width: 50px; height: 50px"
                            :src="scope.row.image_path"
                            :preview-src-list="[scope.row.image_path]">
                        </el-image>
                        <div style="display:block; font-size: 12px;">{{ scope.row.image_name }} </div> 
                </template>
            </el-table-column>  
            <el-table-column prop="gongneng" label="功能" width="100">
                <template slot-scope="scope">
                     <span v-if="scope.row.is_tiezhi==true">贴纸</span>
                     <span v-else-if="scope.row.is_fuzi==true">福字</span>
                     <span v-else-if="scope.row.is_yimifenzhuang==true">1M分装</span>
                     <span v-else-if="scope.row.is_cixiutie==true">刺绣贴</span>
                     <span v-else-if="scope.row.is_xiangxunpian==true">香薰篇</span>
                </template> 
            </el-table-column> 

            <el-table-column prop="othercount" label="所需数量">
                <template slot-scope="scope"> 
                
                  <el-input-number v-if="scope.row.is_tiezhi==true" style="width:80%"  v-model="scope.row.tiezhi_count" :controls="false"></el-input-number>
                  <el-input-number v-else-if="scope.row.is_fuzi==true" style="width:80%"  v-model="scope.row.fuzi_count" :controls="false"></el-input-number>
                  <el-input-number v-else-if="scope.row.is_yimifenzhuang==true" style="width:80%"  v-model="scope.row.yimifenzhuang_count" :controls="false"></el-input-number>
                  <el-input-number v-else-if="scope.row.is_cixiutie==true" style="width:80%"  v-model="scope.row.cixiutie_count" :controls="false"></el-input-number>
                  <el-input-number v-else-if="scope.row.is_xiangxunpian==true" style="width:80%"  v-model="scope.row.xiangxunpian_count" :controls="false"></el-input-number>
                
                </template> 
            </el-table-column> 
      </el-table>  
    </div>
    <div class="bottom-box">
      <el-button @click="factory_save" round style="background-color:chocolate; color:azure; width: 50%;">提交保存</el-button>
    </div>


    <el-drawer
        title="统计"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose"
        @open="drawer_open">
        <div style="width:100%;text-align:center;padding: 3%;"><el-tag style="width:80%;text-align:center;">明信片:{{ total_data.mingxinpian_count  }}</el-tag></div>
        <div style="width:100%;text-align:center;padding: 3%;"><el-tag style="width:80%;text-align:center;">夹子:{{ total_data.jiazi_count }}</el-tag></div>
        <div style="width:100%;text-align:center;padding: 3%;"><el-tag style="width:80%;text-align:center;">气囊:{{ total_data.qinang_count }}</el-tag></div>
        <div style="width:100%;text-align:center;padding: 3%;"><el-tag style="width:80%;text-align:center;">冰箱贴:{{ total_data.bingxiangtie_count }}</el-tag></div>
        <div style="width:100%;text-align:center;padding: 3%;"><el-tag style="width:80%;text-align:center;">挂牌:{{  total_data.guapai_count }}</el-tag></div>
      </el-drawer>

  </div>
</template> 
    
<style>
  .material_div{
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    text-align: center;
    height: 40px; /* 容器高度 */
    font-size: 12px;
  } 
  .title_inner{
    width: 100%;
    color: azure;
  }
  .shadow-box {
  width: 100%;
  height: 40px; 
  background-color: chocolate;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 水平偏移 垂直偏移 模糊半径 颜色 */
}
.bottom-box{
  width: 100%;
  text-align: center;
  position: fixed;
  bottom: 3px;
  align-items: center; /* 垂直居中 */
}
</style>
  <script>  
 
  export default { 
    data() {
      return { 
        drawer: false,
        direction: 'rtl',
        title:'',
        fid:"",
        order_list :[],
        niuwan_logo: this.$url+"/pic/1732279464248885248.jpg",  
        order_list_new:[],
        screenHeight: document.documentElement.clientHeight,   //实时屏幕高度
        table_height: document.documentElement.clientHeight - 40 -70,
        loading:false,
        order_list_new_other:[],
        total_data:{
          mingxinpian_count :0,
          jiazi_count:0,
          qinang_count:0,
          bingxiangtie_count:0,
          guapai_count:0
        }
      }
    }, 
    created() {    
      document.title = "牛丸文创";
      //this.get_model();
      this.get_new_model();
    }, 
    mounted() {
      console.log("当前高"+ this.screenHeight); 
      window.onresize = () => {
            return (() => {
               window.fullHeight = document.documentElement.clientHeight;
               window.fullWidth = document.documentElement.clientWidth; 
               this.table_height = window.fullHeight - 40 - 70; 
            })()
          };
    },
    methods: { 
      drawer_open(){
          this.total_data  = {
            mingxinpian_count :0,
            jiazi_count:0,
            qinang_count:0,
            bingxiangtie_count:0,
            guapai_count:0
          };
          this.order_list_new.forEach(s=>{
             this.total_data.mingxinpian_count += s.mingxinpian_count;
             this.total_data.jiazi_count += s.jiazi_count;
             this.total_data.qinang_count += s.qinang_count;
             this.total_data.bingxiangtie_count += s.bingxiangtie_count;
             this.total_data.guapai_count += s.guapai_count;
          });
      },
      handleClose(done) {
        done();
        /* this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {}); */
        },
        get_new_model(){
          if(this.$route.query.fid ===undefined)
          {
            this.$notify({
                title: 'error',
                message: "缺乏参数",
                type: 'error'
              });
          }
          else{ 
           //获取参数 
            this.fid = this.$route.query.fid; 
            //请求数据
            this.$get(this.$api + '/nw/factory_get_order_new', {
            'id': this.fid
            })
            .then((res) => { 
              if (res.code === 0) { 
                  this.title = res.data.order_name; 
                  var order_list_new = [];
                  var order_list_new_other = [];
                  //硬编一下需要单独处理的项 
                  res.data.order_list.forEach(s=>{
                    //只要有这几类的 算在老逻辑里面
                    if(s.is_mingxinpian == true || s.is_jiazi == true|| s.is_qinang == true|| s.is_bingxiangtie == true|| s.is_guapai == true)
                      { 
                         
                        order_list_new.push(Object.assign({}, s));
                      }
                    ///只要有这几类的直接在新的里面加一下
                     if(s.is_tiezhi ==true || s.is_fuzi ==true|| s.is_yimifenzhuang ==true|| s.is_cixiutie ==true || s.is_xiangxunpian==true)
                     {  
                       order_list_new_other.push(Object.assign({}, s));
                     }
                  }); 
                  order_list_new.forEach(s=>{
                  //为了防止合并提交的时候给产生的其他类进行修改 无论如何直接给其他功能的置空
                    s.tiezhi_oid ="";
                    s.fuzi_oid ="";
                    s.yimifenzhuang_oid ="";
                    s.cixiutie_oid ="";
                    s.xiangxunpian_oid ="";
                  });
                  this.order_list_new = order_list_new; 
                  console.log(this.order_list_new);
                  order_list_new_other.forEach(s=>{
                        //同样为了防止合并提交的时候给产生的其他类进行修改 无论如何直接给其他功能的置空
                        s.mingxinpian_oid ="";
                        s.jiazi_oid = "";
                        s.qinang_oid = "";
                        s.bingxiangtie_oid ="";
                        s.guapai_oid ="";
                  });
                  this.order_list_new_other = order_list_new_other.sort((a, b) => 
                  { return a.image_type_sort - b.image_type_sort});
                  console.log(this.order_list_new_other);  
              } else {
                this.$notify({
                  title: '失败',
                  message: res.msg,
                  type: 'error'
                });
              }
            });
          }
        },
        get_model(){
          if(this.$route.query.fid ===undefined)
          {
            this.$notify({
                title: 'error',
                message: "缺乏参数",
                type: 'error'
              });
          }
          else{ 
           //获取参数 
            this.fid = this.$route.query.fid; 
            //请求数据
            this.$get(this.$api + '/nw/factory_get_order', {
            'id': this.fid
            })
            .then((res) => { 
              if (res.code === 0) { 
                  this.title = res.data.order.order_name; 
                  this.order_list = res.data.order_list; 
              } else {
                this.$notify({
                  title: '失败',
                  message: res.msg,
                  type: 'error'
                });
              }
            });
          }
        },
        factory_save(){
            var concat  = this.order_list_new.concat(this.order_list_new_other); 
            //请求数据
            this.$post(this.$api + '/nw/factory_save_order_new', {"order_list":concat})
            .then((res) => { 
              if (res.code === 0) { 
                this.$notify({
                  title: '成功',
                  message: res.msg,
                  type: 'success'
                });
              } else {
                this.$notify({
                  title: '失败',
                  message: res.msg,
                  type: 'error'
                });
              }
            });
        }
    }
  };
  </script>
  
  